<template>
	<view class="m-state-icon">
		<view class="state-warp flex-center">
			<view class="state-warp_icon flex-center" :style="{'width':size,'height':size,'background':list[type]['color'],'border-color':list[type]['borderColor']}">
				<i-icon :name="list[type]['icon']" color="#fff" :size="size"></i-icon>
			</view>	
			<text class="state-warp_text" :style="{'color':list[type]['color'],'font-size':size}" v-if="textDisplay">{{orderInfo.state_desc}}</text>
		</view>
	</view>
</template>

<script>
	// 	完成：check
	// 	等待：loading
	// 	失败：fail
	// 	错误：error
	// 	取消：cancel
	export default {
		name:"m-state-icon",
		props: ['orderInfo','size','textDisplay'],
		data() {
			return {
				list:[{
					icon:'quill-pen-fill',
					color:'#f57221',
					borderColor:'#fcf2eb',
				},{
					icon:'eye-2-line',
					color:'#f57221',
					borderColor:'#fcf2eb',
				},{
					icon:'error-warning-line',
					color:'#ee5845',
					borderColor:'#fde9e6',
				},{
					icon:'check-line',
					color:'#36b368',
					borderColor:'#e8faef',
				},{
					icon:'error-warning-line',
					color:'#ee5845',
					borderColor:'#fde9e6',
				},{
					icon:'close-line',
					color:'#ccc',
					borderColor:'#eee',
				}]
			};
		},
		computed: {
			type:function(){
				return this.orderInfo.state - 1;
			},
		}
	}
</script>

<style lang="scss">
	.state-warp{
		// padding:15px 0;
		align-items: center;
		&_icon{
			box-sizing: content-box;
			border-radius: 100%;
			padding: 3px;
			background-color: #ccc;
			border: 3px solid #eee;
		}
		&_text{
			margin-left: 3px;
			font-size: $titleSize;
			font-weight: bold;
			// color:$incolor-2
		}
	}
	.loading{
		animation:rotating 3s infinite;
	}
	@keyframes rotating{
		from{
			transform:rotate(0)
		}
		to{
			transform:rotate(360deg)
		}
	}
</style>